<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrap {
				position: relative;
				margin: 100px auto;
				width: 300px;
				height: 300px;
			}
			
			#img {
				position: absolute;
			}
			
			.dam-board {
				position: absolute;
				margin: 0;
				padding: 0;
				width: 300px;
				height: 300px;
			}
			
			.dam-board li {
				display: inline-block;
				margin: 0;
				padding: 0;
				width: 30px;
				height: 30px;
				vertical-align: middle;
			}
			
			.on {
				background-color: darkgray;
			}
			#gg{
				position: absolute;
				bottom: -20px;
				width: 100%;
				background-color: red;
				text-align: center;
				
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div id="img">
				<img src="img/img.jpg" />
			</div>
			<ul class="dam-board"></ul>
			<div id="gg">
				刮卡扫码福利多多
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	var oBam = document.getElementsByClassName("dam-board")[0];
	var minBam = oBam.getElementsByTagName("li");
	(function() {
		var str = "";
		for(var i = 0; i < 100; i++) {
			str += `<li class='on'></li>`;
		}
		oBam.innerHTML = str;
	})();
	var half = minBam.length * (0.5);
	(function() {
		var oOn = document.getElementsByClassName("on");
		var allLen = minBam.length;
		for(var ele in minBam) {
			minBam[ele].onmouseenter = function() {
				this.className = "";
				if(oOn.length <= half) {
					var all = oOn;
					for(var ele in minBam) {
						minBam[ele].className = "";
					}
				}
			}
		}
	})();
</script>